<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html ng-app="AlarmApp">
<head>
<base href="<%=basePath%>">

<title>My JSP 'alarmList.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

<style type="text/css">
.controls.inline>* {
	display: inline-block;
}

.controls.inline>input {
	width: 100px;
}
</style>
</head>
<body>
	<div class="row" style="margin-left:0;">
		<div class="row" style="margin-left:0;">
			<div class="span8">
				<div ng-controller="alarmListCtrl" style="margin-top:10px;">
					<div class="control-group">
						<form id="searchParam">
							<div class="controls inline">
								<input class="input-xlarge focused" name="key_word" type="text"
									placeholder="请输入关键字"> <label for="focusedInput">单位名称:</label>
								<input class="input-xlarge focused" type="text" value=""
									name="company_name"> <label for="focusedInput">时间:</label>
								<input class="input-xlarge focused datetimepicker" type="datetime" value=""
									name="start_alarm_time" class="datetimepicker"> - <input
									class="input-xlarge focused datetimepicker" type="datetime" value=""
									name="end_alarm_time" class="">
								<button class="btn btn-warning" ng-click="searchBtn()">查询</button>
							</div>
						</form>
						<div class="controls">
							<a href="index.do?jspName=addAlarm"
								class="btn btn-primary">添加</a> 
							<a href="index.do?jspName=addAlarm&dealAlarm=1&id={{alarmId}}"
								class="btn btn-success">编辑</a> 
							<a href="delAlarm.json?&dealAlarm=2&id={{alarmId}}"
								class="btn btn-info">删除</a>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span12">
							<form action="index.do?jspName=alarmList&menuId=1" method="post" id="pageForm">
								<div class="block" style="    min-height: 700px;">
									<div class="navbar navbar-inner block-header">
										<div class="muted pull-left">警情总览</div>
									</div>
									<div class="block-content collapse in">
										<div class="span12">
											<div id="example_wrapper"
												class="dataTables_wrapper form-inline" role="grid">
												<div class="row">
													<div class="span6">
														<div id="example_length" class="dataTables_length">
															<label><select size="1" name="page.count"
																style="width: 76px;margin-left: 20px;"
																aria-controls="example" onchange="changePage()"><option value="10"
																		selected="selected">10</option>
																	<option value="25">25</option>
																	<option value="50">50</option>
																	<option value="100">100</option></select> records per page</label>
														</div>
													</div>
												</div>
												<table cellpadding="0" cellspacing="0" border="0"
													class="table table-striped table-bordered" id="example">
													<thead>
														<tr>
															<th>#</th>
															<th>单位名称</th>
															<th>报警时间</th>
															<th>接警时间</th>
															<th>类型</th>
															<th>警情描述</th>
															<th>处理结果</th>
														</tr>
													</thead>
													<tbody>
														<tr id="tr_{{alarm.id}}" data-id="alarm.id" ng-repeat="alarm in dataList" ng-click="trClick($event,obj);">
															<td ng-bind="$index+1" data-id="{{alarm.id}}"></td>
															<td ng-bind="alarm.company_name" data-id="{{alarm.id}}"></td>
															<td ng-bind="alarm.alarm_time" data-id="{{alarm.id}}"></td>
															<td ng-bind="alarm.alarm_time" data-id="{{alarm.id}}"></td>
															<td ng-bind="alarm.typeName" data-id="{{alarm.id}}"></td>
															<td ng-bind="alarm.p_desc" data-id="{{alarm.id}}"></td>
															<td ng-bind="alarm.resultName" data-id="{{alarm.id}}"></td>
														</tr>
		
													</tbody>
												</table>
											</div>
											<div class="row" style="margin-left: 4px;">
												<div class="span6">
													<div class="dataTables_info" id="example_info">
														<span ng-bind="data.start+1"></span> to <span
															ng-bind="data.count"></span><!--  of<span ng-bind="data.total"></span> 
														entries-->
													</div>
												</div>
												<div class="span6">
													<div class="dataTables_paginate paging_bootstrap pagination"
														style="margin-top:0;">
														<input type="text" name="page.pageNo" onchange="changePage()"/>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<!-- /block -->
							</form>
							<script type="text/javascript">
									function changePage(){
										$("#pageForm").submit();
									}
							</script>
						</div>
					</div>
				</div>
			</div>
			<style>
				#dataShow li {
					float:left;
				}
			</style>
			<div class="span4">
				<div class="row">
					<div id="dataShow" style="height:50px;" ng-controller="alarmDataCtrl">
						<ul style="list-style: none;">
							<li style="margin-right:10px;" ng-repeat="data in alarmMap" class="{{data.btnClass}}">
								<span ng-bind="data.name"></span>
								<span ng-bind="data.count"></span>
							</li>
						</ul>
					</div>
					<div id="lineChart" style="height:300px;"></div>
					<div id="pineChart" style="height:300px;"></div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
